<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
		p[class=p1]{
			color: tomato;
		}
		p[class~=p1]{
			color: gold;
		}
		.p12:hover+.p1{
			color: red;
		}
		a:visited{
			color: grey;
		}
		a:hover{
			color: red;
		}
		a:active{
			color: blue;
		}
		div p:last-child{
			font-size: 40px;
		}
		.p12::first-line{
			color: red;
			font-weight: 800;
			font-size: 28px;
		}
		.p12::before {  
        content: open-quote;  
        z-index: -1;  
        color: #DDD;  
        font-size: 50px;  
        font-family: serif;  
        font-weight: bolder;  
    	}  
    	.p12::after {  
        content: close-quote;  
        z-index: -1;  
        color: #DDD;  
        font-size: 50px;  
        font-family: serif;  
        font-weight: bolder;  
    	} 
    	p:before{
    		content: counter(jishuqi);
    		color: black;
    	}
		p{
			counter-increment: content jishuqi;
		}
		
		.xiaohei{
			font-size: 50px;
			margin-left: 50px;
		}
		.xiaohei:hover::before{
			content:"[";
			position: absolute;
			margin-left:-15px;
			color: #ff0000;
		}
		.xiaohei:hover::after{
			content: "]";
			color: #ff0000;
		}
		.shop::after{
			content: "0";
			color: #fff;
			position: absolute;
			width: 15px;
			height:15px;
			font-size: 11px;
			border-radius: 50%;
			text-align: center;
			background-color:gold;
			margin-left: -4px;
			margin-top: -5px;
		}
		/*p[class$=p2]{
			color: red;
		}*/
	</style>
</head>
<body>
	<p class="p1 p2">你好</p>
	<p class="p12">你好</p>
	<p class="p1 p2">你好</p>
	<p class="p12">你好</p>
	<p class="p1 p2">你好</p>

	<div>
		<p class="p12" style="width: 200px;">你好
		<br> 不好</p>
		<p class="p1 p2">你好</p>
		<p class="p1 p2">你好</p>
	</div>
	<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&ch=2&tn=78040160_34_pg&wd=sublime%20utf8&oq=w%2526lt%253Bc&rsv_pq=c456e7530077c144&rsv_t=35b7kfPzUMd3ErPwQM%2B2h6Z4OtvemqFtZKTXavUWs7eakT1Z94UArxjCYsG4SK0ZuD45tFw&rqlang=cn&rsv_enter=1&rsv_sug3=12&rsv_sug1=11&rsv_sug7=100&bs=w3c">点我</a>

	<span class="xiaohei">xiaohei</span>
	<div class="shop">购物车</div>
</body>
</html>